import React, { Component } from 'react';
import services from '../api/interface'
import { IndexBar, List, NavBar } from 'antd-mobile'


interface Props {
    history: history
    location:any
}
interface State {
    citylist: Citylist[]
}
interface Citylist {
    letter: string
    data: Data[]
}
interface Data {
    name: string
}
interface history {
    push:any
    go:any
}

class City extends Component<Props, State> {
    constructor(props: any) {
        super(props);
        this.state = {
            citylist: []
        }
    }

    async componentDidMount() {
        var res = await services.city.ap_sortCity()
        console.log(JSON.parse(res.data.data) );
        this.setState({ citylist: JSON.parse(res.data.data) })
    }

    back() { this.props.history.go(-1) }
    getCity(city: any) {
        this.props.history.push({ pathname: '/index/indexx', state: { city } })
    }

    render() {
        return (
            <div className='city'>
                <NavBar onBack={() => { this.back() }}>城市选择</NavBar>
                <div style={{ height: window.innerHeight }}>
                    <IndexBar>
                        {this.state.citylist.map((group) => {
                            const { letter, data } = group
                            return (
                                <IndexBar.Panel
                                    index={letter}
                                    title={`${letter}`}
                                    key={`${letter}`}
                                >
                                    <List>
                                        {data.map((item, index) => (
                                            <List.Item onClick={() => { this.getCity(item.name) }} key={index}>{item.name}</List.Item>
                                        ))}
                                    </List>
                                </IndexBar.Panel>
                            )
                        })}
                    </IndexBar>
                </div>
            </div>
        );
    }
}

export default City;